<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        width: 200px;
        height: 200px;
      }
      li {
        list-style-type: none;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <ul id="new">
      <li>同学1</li>
      <li>同学2</li>
      <li>同学1</li>
      <li>同学2</li>
    </ul>
    <script>
        //隔行换色
        //先选中所有的li ,然后找索引偶数
        // var mate = document.getElementsByTagName('li');
        //     for(var i =0 ; i < mate.length ;i++){
        //         if(i%2 === 0){
        //             mate[i].style.backgroundColor = 'skyblue'
        //         }
        //     }

       // 当鼠标移上去换色
    //    var mate = document.getElementsByTagName('li');
    //         for(var i = 0 ;i < mate.length;i++){
    //             mate[i].onmouseover = function(){

    //             this.style.backgroundColor ='red'
    //         }
    //         mate[i].onmouseout = function(){
    //            this.style.backgroundColor =''
    //         }
    //         }

        // 第二种
        //获取所有的i元素
    //     var mate = document.getElementsByTagName('li');
    //     //遍历所有的i
    //     for(var i = 0; i < mate.length;i++){
    //         //IIFE 自执行函数，这里起的作用就是保存循环变量i，便于让子函数去引用
    //         ;(function(i){
    //             //新参i就是局部作用域
    //         mate[i].onmouseover = function(){
    //      mate[i].style.backgroundColor = 'red';
    //  }
    //  mate[i].onmouseout = function(){
    //     mate[i].style.backgroundColor = ''
    //  }
    //     })(i)
    //     }

    //查看样式表样式值，只读不能修改
       var box = document.getElementById('new')
       var cssStyle = window.getComputedStyle(box)
       console.log(cssStyle.height);

      

    </script>
  </body>
</html>
